<script setup>
defineProps({
    showTitle:Boolean,
    needLoadingMore:Boolean
})

const emit = defineEmits(['didClickItem'])
const onClick = (item)=>{
  // 可以传一个参数，或者一个参数对象item， {item}都可以
  emit('didClickItem',item)
}
</script>

<template>
  <div class="title" v-if="showTitle">
    <div>- 热卖单品 -</div>
  </div>
  <div class="list">
      <div class="item" v-for="item in 10" :key="item" @click="onClick(item)">
        <img class='shop-image' src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" alt="">
        <div class="price">
          <span class="min-price">￥ 2680.00</span>
          <span class="max-price">￥ 6680.00</span>
        </div>
        <div class="name">
          Bonpiont
        </div>
        <span class="zhe">
          7折
        </span>
      </div>
  </div>
  <div class="loading" v-if="needLoadingMore">- 加载更多 -</div>
</template>

<style scoped lang="scss">
.title {
  display: block;
  height: 40px;
  text-align: center;
  font-size: 18px;
  line-height: 22px;
  color: #333;
}
.list {
  display:flex;
  flex:1;
  margin-left:10px;
  margin-right:0;
  flex-wrap: wrap;
  .item {
    display:block;
    width:172px;
    height:220px;
    background-color:#fff;
    margin-right:10px;
    margin-bottom:10px;

    .shop-image {
      width:100%;
      height:70%;
    }
    .price {
      width:100%;
      .min-price {
        width:50%;
        font-size:12px;
        color:red;
      }
      .max-price {
        width:50%;
        font-size:10px;
        color:#333;
        text-decoration: line-through;
      }
    }

    .name {
      font-size:12px;
      color:#333;
    }
   
    .zhe {
      font-size:12px;
      color:red;
      padding:3px 5px;
      border: 1px solid red;
      border-radius: 3px;
    }
  }
  
}

.loading {
    height:40px;
    width:100%;
    text-align:center;
    background-color:#fff;
    line-height:40px;
    font-size:14px;
    
  }
</style>